<template>
  <Layout>
    <nav class="head_nav">
      <Menu
        mode="horizontal"
        :theme="theme1"
        :active-name="MenuNum"
        @on-select="clickmenu"
        style="margin: 0 auto"
      >
        <MenuItem name="0" to="/" class="topimg">
          <img src="../../static/images/dakunblog.png" />
        </MenuItem>

        <MenuItem name="2" to="/">
          <Icon type="md-home" />
          首页
        </MenuItem>

        <Submenu name="3">
          <template slot="title">
            <Icon type="logo-html5" />
            学无止境
          </template>
          <MenuGroup title="前端">
            <MenuItem name="3-1" to='/detail'>HTML教程</MenuItem>
            <MenuItem name="3-2">CSS教程</MenuItem>
            <MenuItem name="3-3">JavaScript教程</MenuItem>
            <MenuItem name="3-4">jQuery教程</MenuItem>
          </MenuGroup>
        </Submenu>

        <MenuItem name="1" to="bloglist">
          <Icon type="ios-leaf" />
          博客日记
        </MenuItem>

        <MenuItem name="16" to="/goodmood">
          <Icon type="logo-snapchat" />
          笔录
        </MenuItem>

        <MenuItem name="4" to="/timeline">
          <Icon type="ios-timer-outline" />
          时光轴
        </MenuItem>
        <MenuItem name="7">
          <Icon type="logo-github" />
          开源
        </MenuItem>
        <MenuItem name="5" to="/about">
         <Icon type="ios-at" />
          关于大坤
        </MenuItem>
      </Menu>
    </nav>
  </Layout>
</template>

<script>
export default {
  name: "Head",
  data() {
    return {
      theme1: "dark",
      MenuNum: "0",
    };
  },
  created() {
    if (sessionStorage.getItem("MenuNum")) {
      this.MenuNum = sessionStorage.getItem("MenuNum");
    }
  },
  methods: {
    clickmenu(name) {
      name < 1 ? (name = "2") : name;
      this.MenuNum = name;
      sessionStorage.setItem("MenuNum", name);
      // console.log(name)
    },
  },
};
</script>

<style scoped>
.ivu-layout::before {
  content: "";
  height: 5px;
  position: absolute;
  top: 0;
  width: 100%;
}
.head_nav {
  width: 100%;
  background: #373737;
  opacity: 80;
}
.ivu-menu-dark {
  background: none !important;
}
.head_nav ul {
  width: 80%;
  margin: 0 auto;
}
.ivu-menu-item a {
  color: rgba(255, 255, 255, 0.7);
}
.ivu-menu-item a:hover {
  color: #fff;
}
.topimg {
  width: 200px;
  height: 60px;
  /* background-color: #fff; */
}
</style>
